/**
*
* Override Infima's variables + set color palette
*
**/

:root {
  --palette-charade: #21222c;
  --palette-gray: #32343e;
  --palette-green: #66bb6a;
  --palette-midnight: #141725;
  --palette-pale-blue: #b1b5d3;
  --palette-pink: #d14671;
  --palette-pink-darker: #be2f5b;
  --palette-rock: rgb(var(--palette-rock-raw));
  --palette-rock-raw: 38, 40, 51;
  --palette-sky: #81d3f9;
  --palette-turquoise: #0cc0df;
  --palette-white: #fff;
  --palette-white-03: rgba(255, 255, 255, 0.03);
  --palette-white-05: rgba(255, 255, 255, 0.05);
  --palette-white-10: rgba(255, 255, 255, 0.1);
  --palette-white-20: rgba(255, 255, 255, 0.2);
  --palette-white-30: rgba(255, 255, 255, 0.3);
  --palette-white-darker: #d9d9d9;
  --palette-yellow: #ffd54f;

  --transition-bezier: cubic-bezier(0.17, 0.67, 0.83, 0.67);

  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Ubuntu, Cantarell, Helvetica, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Android Emoji", EmojiSymbols, "EmojiOne Mozilla",
    "Twemoji Mozilla", "Segoe UI Symbol", "Noto Color Emoji";

  --font-size-small: 15px;
  --font-size-normal: 16px;
  --font-size-large: 18px;
  --font-size-llarge: 24px;
  --font-size-xlarge: 32px;
  --font-size-xxlarge: 46px;
  --font-size-xxxlarge: 64px;

  --ifm-background-color: var(--palette-charade);
  --ifm-blockquote-color: var(--palette-pale-blue);
  --ifm-code-background: var(--palette-gray);
  --ifm-code-color: var(--palette-white);
  --ifm-code-font-size: var(--font-size-small);
  --ifm-color-emphasis-300: var(--palette-pale-blue);
  --ifm-color-primary: var(--palette-pink);
  --ifm-color-primary-dark: #c93261;
  --ifm-color-primary-darker: var(--palette-pink-darker);
  --ifm-color-primary-darkest: #9c274b;
  --ifm-color-primary-light: #d75c82;
  --ifm-color-primary-lighter: #d9688b;
  --ifm-color-primary-lightest: #e289a4;
  --ifm-color-info: var(--palette-sky);
  --ifm-color-success: var(--palette-green);
  --ifm-color-warning: var(--palette-yellow);
  --ifm-dropdown-background-color: var(--palette-rock);
  --ifm-font-color-base: var(--palette-white);
  --ifm-font-family-base: var(--font-family-base);
  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --ifm-font-size-base: var(--font-size-small);
  --ifm-global-border-radius: 8px;
  --ifm-h1-font-size: var(--font-size-xxlarge);
  --ifm-h2-font-size: var(--font-size-llarge);
  --ifm-h4-font-size: var(--font-size-large);
  --ifm-heading-margin-bottom: 1.5rem;
  --ifm-hr-border-color: var(--palette-white-20);
  --ifm-link-color: var(--palette-turquoise);
  --ifm-menu-link-sublist-icon: url("/img/infima/arrow.svg");
  --ifm-navbar-background-color: var(--palette-charade);
  --ifm-navbar-height: 80px;
  --ifm-navbar-item-padding-horizontal: 20px;
  --ifm-navbar-padding-horizontal: 0;
  --ifm-navbar-shadow: 0 1px 0 0 var(--palette-white-10);
  --ifm-paragraph-margin-bottom: 1.25rem;
  --ifm-pre-background: var(--palette-midnight);
  --ifm-table-cell-padding: 0.15rem 1rem;
  --ifm-toc-border-color: var(--palette-white-10);
}

html[data-theme="dark"] {
  --ifm-background-color: var(--palette-charade);
  --ifm-color-emphasis-300: var(--palette-pale-blue);
  --ifm-menu-link-sublist-icon: url("/img/infima/arrow.svg");
}

html[data-theme="dark"] .DocSearch {
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(0, 0, 0, 0.5);
  /* Modal */
  --docsearch-modal-background: var(--ifm-background-color);
  /* Search box */
  --docsearch-searchbox-background: var(--palette-white-10);
  --docsearch-searchbox-focus-background: var(--palette-midnight);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--palette-rock);
  /* Footer */
  --docsearch-footer-background: var(--ifm-background-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--palette-gray) 0%,
    var(--palette-rock) 100%
  );
}

/**
 *
 * Override Docusaurus/Infima
 *
 **/

nav {
  --ifm-font-size-base: var(--font-size-normal);
  --ifm-link-color: var(--palette-pink);
}

.markdown {
  --ifm-h2-vertical-rhythm-top: 3;
  --ifm-h3-vertical-rhythm-top: 2;
  --ifm-heading-vertical-rhythm-top: 2; /* h4 */
  --ifm-heading-vertical-rhythm-bottom: 0.4;
  --ifm-table-background: var(--palette-white-03);
  --ifm-table-border-color: var(--palette-charade);
  --ifm-table-border-width: 4px;
  --ifm-table-head-background: var(--palette-gray);
  --ifm-table-head-color: var(--palette-white);
  --ifm-table-stripe-background: var(--palette-white-03);
}

.admonition {
  --ifm-color-info: var(--palette-pale-blue);
  --ifm-color-success: var(--ifm-color-primary-lightest);
  --ifm-heading-color: #000;
}

.alert--secondary {
  --ifm-alert-background-color: var(--palette-white-darker);
  --ifm-alert-border-color: var(--palette-white-darker);
}

.pagination-nav {
  --ifm-color-content-secondary: var(--palette-white);
  --ifm-link-color: var(--palette-white);
  --ifm-link-hover-color: var(--palette-white);
  --ifm-pagination-nav-color-hover: var(--palette-white);
  --ifm-pagination-nav-border-radius: var(--ifm-global-border-radius);
  --ifm-color-emphasis-300: transparent;
}

/* This is from Layout.tsx (cf. upstream) */

html,
body {
  height: 100%;
}

body {
  margin: 0;
  transition: var(--ifm-transition-fast) ease color;
}

#__docusaurus {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* Pagination */

.pagination-nav__item--next .pagination-nav__link {
  background: var(--palette-pink);
}

.pagination-nav__link {
  background: var(--palette-white-05);
}

.navbar__link,
.dropdown__link {
  font-size: var(--ifm-font-size-base);
}

main article header h2 a {
  color: var(--palette-white-darker);
}

.DocSearch-Button-Key {
  display: none !important;
}

/**
 *
 * Custom global styles
 *
 **/

/* Firefox */
* {
  scrollbar-color: var(--palette-pale-blue) var(--palette-gray);
  scrollbar-width: thin;
}

/* WebKit / Blink */
::-webkit-scrollbar {
  width: 7px !important;
  height: 7px !important;
}

::-webkit-scrollbar-track {
  background: var(--palette-gray) !important;
}

::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
  background: var(--palette-pale-blue) !important;
}

::-webkit-scrollbar-corner {
  background: var(--palette-gray) !important;
}

.navbar__item--slack {
  padding-left: 2.25rem;
  background-image: url("/img/navbar/slack.svg");
  background-position-x: 0.5rem;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

.navbar__item--github {
  padding-left: 2.25rem;
  background-image: url("/img/navbar/github.svg");
  background-position-x: 0.5rem;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

.color--pink {
  color: var(--palette-pink);
}

.screenshot--shadow {
  box-shadow: 0 15px 61px 5px rgba(20, 23, 37, 0.94);
}

.screenshot--docs {
  display: block;
  margin: 4rem auto;
}

.screenshot--small {
  max-width: 500px;
}

.margin-auto {
  margin: 0 auto;
}

.container.row {
  padding: 0;
}

.career h1 {
  margin-bottom: 4rem;
  text-align: center;
}
